<template>
  <div class="partGoodsSelection">
    <div class="headCrm-good-Select">
        <el-input placeholder="请输入搜索内容" prefix-icon="el-icon-search" v-model="input"></el-input>
        <button class="cancel-but" @click="cancelbut">取消</button>
        <br/>
    </div>

    <div class="contentCrm">
        <div class="line1">
            <span>排序</span>
            <span @click="storeClass">商品分类</span>
            <span>品牌</span>
        </div>
        <ul class="goodsList" v-for="(item, index) in goodsList" :key="index" @click="submitSure">
            <li>
                <span>{{item.name}}</span>
                <span class="f_fr">{{item.storehouse}}</span>
            </li>
            <li>
                <span>{{item.brand}}</span>
            </li>
            <li>
                <span>{{item.model}}</span>
            </li>
        </ul>    
    </div>
    
    <div class="footCrm">
    </div>
  </div>
</template>

<script>
    //import Footer from '../components/Footer.vue';//引入组件
    export default {
        name: 'partGoodsSelection',
            // components: {delivery
            //     Footer
            // },
        data() {
            return {
                goodsList:[
                    {
                        name:'加厚铁艺角码L型码角铁支架',
                        storehouse: '总仓',
                        brand: '金有强',
                        model:'1',
                    },
                    {
                        name:'不锈钢平开合页1.5寸',
                        storehouse: '返厂仓',
                        brand: 'THREE SEVEN/777',
                        model:'1.5寸',
                    },
                ],
                selected: '',
                input:'',
                isCollapse: true,
            }
        },
        mounted: function(){
        },
        methods: {
            cancelbut:function(){
                this.$router.push({
                    path:'/partApplyBut'
                })                   
            },
            storehouse:function(){
                this.$router.push({
                    path:'/apartStorehouse'
                })                 
            },
            storeClass:function(){
                this.$router.push({
                    path:'/partGoodsClass'
                })    
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            submitSure:function(){
                this.$router.push({
                    path:'/partApplyBut'
                })                  
            }
        },
    }
</script>

<style scoped>
.partGoodsSelection{
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    font-size: 0.33rem;
}
/* headCrm-good-Selec */
.headCrm-good-Selec{
    border-color: #ff5000;
}
.el-input.el-input--prefix{
    width: 80%;
    margin:0.2rem 0.2rem 0.2rem 0;
}
.cancel-but{
    width: 1rem;
    position:absolute;
    right: 0.5rem;
    top:0.7rem;
    background-color: #ff5000;
    line-height:0.5rem;
    text-align:center;
    color:#fff;
    border: 0.01rem solid #ffffff;
    border-radius:0.33rem;
    box-shadow:0.05rem 0.05rem 0.1rem #646464;;
}
.line1 span{
    width: 33%;
    border: 0.01rem solid #E6E6E6;
    height: 0.9rem;
    line-height: 0.9rem;
    font-size: 0.33rem;
    text-align: center;
    float: left;
    margin-bottom: 0.3rem;
}

/* .contentCrm-reapirman */
.contentCrm{
    color: #646464;
}
.goodsList{
    border-bottom: 0.01rem solid #E6E6E6;
    padding-bottom: 0.3rem;
    float: left;
    width: 100%;
}
.goodsList li{
    padding-top: 0.33rem;
}


</style>
